<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0; padding: 0;}
        #banner{
            width: 790px;
            height: 340px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        #banner ul{
            list-style-type: none;
        }
        #banner .circle{
            width: 100px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -50px;
            height: 20px;
            border-radius: 10px;
            background: rgba(255,255,255,0.6);
            overflow: hidden;
            padding-left: 5px;
        }
        #banner .circle span{
            width: 20px;
            height: 20px;
            display: block;
            float: left;
            background: #fff;
            border-radius: 50%;
            margin-right: 5px;
            text-align: center;
            line-height: 20px;
            color: #f60;
            font-size: 14px;
            cursor: pointer;
        }
        #banner .circle span.active{
            background: #f60;
            color: #fff;
        }
        #banner .prev,#banner .next{
            width: 30px;
            height: 60px;
            background: #fff;
            color: #000;
            text-align: center;
            line-height: 60px;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            display: none;
        }
        #banner .prev{
            left: 30px;
        }
        #banner .next{
            right: 30px;
        }
    </style>
</head>
<body>
<div id="banner">
    <ul>
        <li><img src="img/timg%20(1).jpg" alt=""></li>
        <li><img src="img/timg%20(2).jpg" alt=""></li>
        <li><img src=img/timg%20(3).jpg alt=""></li>
        <li><img src="img/timg%20(4).jpg" alt=""></li>
    </ul>
    <div class="circle">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <span class="prev">&lt;</span>
    <span class="next">&gt;</span>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        //鼠标移入大盒子让箭头显示，移出消失
        $("#banner").hover(function () {
            $("#banner .prev,#banner .next").fadeIn();
            clearInterval(timer);
        },function () {
            $("#banner .prev,#banner .next").fadeOut();
            timer = setInterval(lunbo,2000);
        });

        function silder(index) {
            //当鼠标移入的时候，给当前移入的元素添加类名
            //把当前移入元素上下同级的所有元素的类名移除
            $(".circle span").eq(index).addClass("active").siblings().removeClass("active");
            //改变图片
            $("#banner ul li").eq(index).fadeIn().siblings().fadeOut();
        }

        //初始化一个全局变量
        var _index = 0;
        var timer = null;
        $(".circle span").mouseover(function () {
            //获取当前移入元素的下标
            _index = $(this).index();
            silder(_index);
        })

        function lunbo() {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        }
        //开启定时器
        timer = setInterval(lunbo,2000);
        //点击切换到下一张
        $("#banner .next").click(function () {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        })
        //点击切换到上一张
        $("#banner .prev").click(function () {
            if(_index == 0){
                _index = 3;
            }else{
                _index--;
            }
            silder(_index);
        })
    })
</script>